<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>jQuery_Game</title>
		<meta name="description" content="">
		<meta name="keywords" content="">
		<script type="text/javascript" src="js/jquery1.42.min.js"></script>
		<style type="text/css" media="screen">
			img { width: 100px; height: 100px; border: 5px solid #000000; margin: 0; padding: 0; cursor: pointer; }
			ul { font-size: 0; padding: 0; margin: 0; border: 0 none; list-style-type: none; }
			li { display: inline-block; width: 100px; height: 100px; border: 5px solid #000000; font-size: 48px; font-weight: bold; text-align: center; line-height: 100px; cursor: pointer; }
			.game { position: relative; width: 440px; height: 550px; border: 5px solid #000000; font-size: 0; margin: 0 auto; }
			.game ul.top { float: right; width: 330px; height: 110px; background: #339399; }
			.game ul.top li { cursor: text; vertical-align: middle; }
			.game ul.buttons li { display: inline-block; color: #FFFFFF; background: #993933; vertical-align: middle; }
			.game ul.buttons li:first-child +li +li +li +li, .game ul.buttons li:first-child +li +li +li +li +li, .game ul.buttons li:first-child +li +li +li +li +li +li { display: block; }
			.game ul.blocks { width: 330px; height: 330px; background: url(img/huaji.jpg) center center no-repeat; -webkit-background-size: 100% 100%; background-size: 100% 100%; position: absolute; bottom: 0px; right: 0px; }
			.game ul.blocks li { font-size: 0px; }
			.game ul.blocks li img { border: 0 none; }
		</style>
	</head>
	<body>
		<div class="game">
			<img src="img/logo.png" alt="">
			<ul class="top">
				<li>拼</li>
				<li id="reset"><img src="img/huaji.jpg" style="width: 100; height: 100; border: 0 none;" alt=""></li>
				<li>图</li>
			</ul>
			<ul class="buttons">
				<li id="start">戳</li>
				<li onclick="move('up',1)">^</li>
				<li onclick="move('up',2)">^</li>
				<li onclick="move('up',3)">^</li>
				<li onclick="move('left',1)"><</li>
				<li onclick="move('left',2)"><</li>
				<li onclick="move('left',3)"><</li>
			</ul>
			<ul class="blocks">
				<li><img src="img/1.jpg" alt="">1</li>
				<li><img src="img/2.jpg" alt="">2</li>
				<li><img src="img/3.jpg" alt="">3</li>
				<li><img src="img/4.jpg" alt="">4</li>
				<li><img src="img/5.jpg" alt="">5</li>
				<li><img src="img/6.jpg" alt="">6</li>
				<li><img src="img/7.jpg" alt="">7</li>
				<li><img src="img/8.jpg" alt="">8</li>
				<li><img src="img/9.jpg" alt="">9</li>
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		function sortNumber(a,b){
			return b - a;
		}
		function move(m,n){
			var arrBefore = $('.blocks>li:lt('+((n-1)*3)+')')
			var arrBlocks = $('.blocks>li');
			var arrAfter = $('.blocks>li:gt('+(3*n-1)+')')
			switch(m) {
				case 'left':
				$('.blocks').empty().append(arrBefore).append(arrBlocks[(n-1)*3+1]).append(arrBlocks[(n-1)*3+2]).append(arrBlocks[(n-1)*3]).append(arrAfter);
					break;
				case 'up':
					
					break;
			};
		};
	</script>
</html>